import React, { useState } from "react";
import { Menu } from "antd";
import style from "@/style/left/index.module.less";
import type { MenuProps } from "antd/es/menu";

type MenuItem = Required<MenuProps>["items"][number];

function getItem(
  label: React.ReactNode,
  key?: React.Key | null,
  icon?: React.ReactNode,
  children?: MenuItem[]
): MenuItem {
  return {
    key,
    icon,
    children,
    label,
  } as MenuItem;
}

const items: MenuItem[] = [
  getItem("模版", "1", <i className="iconfont icon-lowmoban"></i>),
  getItem("文本", "2", <i className="iconfont icon-lowwenben"></i>),
  getItem("图片", "3", <i className="iconfont icon-lowtupian"></i>),
  getItem("图形", "4", <i className="iconfont icon-lowshape"></i>),
  getItem("组件", "5", <i className="iconfont icon-lowzujian"></i>),
  getItem("按钮", "6", <i className="iconfont icon-lowswitchButton"></i>),
];

const Index: React.FC = () => {
  const [menu, setMenu] = useState("0");
  return (
    <div style={{ flex: 1, zIndex: 2 }}>
      <div className={style.leftcon}>
        <div className={style.logo}>
          <i className="iconfont icon-lowdidaima"></i>
          <div>Y-Low-Code</div>
        </div>
        <Menu
          style={{ width: 120 }}
          defaultSelectedKeys={["0"]}
          defaultOpenKeys={["sub1"]}
          items={items}
          onSelect={(item) => {
            setMenu(item.key);
          }}
        />
      </div>
      {menu != "0" && (
        <div className={style.temp}>
          <div
            className={style.close}
            onClick={() => {
              setMenu("0");
            }}
          >
            <i className="iconfont icon-lowguanbixiao"></i>
          </div>
          <div
            draggable={true}
            style={{ marginTop: '30px' }}
            onDragStart={(e) => {
              e.dataTransfer.setData(
                "lplp",
                JSON.stringify({ style: { position: "absolute", width: '40px', height: '40px' } })
              );
            }}
          >
            1111111111111111111111111111111111111111111111111111111111111
          </div>
        </div>
      )}
    </div>
  );
};

export default Index;
